<template>
	<view class="bgBox">
		<view class="promiseBox">
			<view class="title">平台承诺</view>
			<view class="promiseList">
				<view class="promiseContent" v-for="(item,index) in promiseList" :key="index">
					<image class="promiseIcon" :src="item.iconUrl"></image>
					<text class="Promisetext">{{item.text}}</text>
				</view>
			</view>
		</view>
		
		<view class="sellBox">
			<view class="sellLeft">
				<view class="word">
					<view class="title">闲置寄出</view>
					<text class="detail">全程托管不操心</text>
				</view>
				<view class="content" @click="gonavigate('/pages/sell/sendBaby')">
					<u-icon size="45" name="/static/images/promise/sellParcel.png"></u-icon>
					<view class="soonSend">
						<text style="padding-right: 2px;">立即寄出</text>
						<u-icon size="14" name="arrow-right" color="white"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="sellRightTop">
				<view class="word">
					<view class="title">翡翠评估</view>
					<text class="detail">在线闲置估价</text>
				</view>
				<view class="content">
					<u-icon size="30" name="/static/images/promise/sellEvaluate.png"></u-icon>
					<u-icon size="20" name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="sellRightBottom">
				<view class="word">
					<view class="title">上门回收</view>
					<text class="detail">高档翡翠上门回收</text>
				</view>
				<view class="content">
					<u-icon size="30" name="/static/images/promise/sellDoor.png"></u-icon>
					<u-icon size="20" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
			
		<view class="shareBox">
			<view class="title">分享翡翠知识</view>
			<view class="shareContent" @click="gonavigate('/pages/friend/publish/publish')">
				<view class="shareLeft">
					<u-icon name="/static/images/promise/shareNew.png" size="22"></u-icon>
					<text class="talk">发说说</text>
				</view>
				<view class="shareRight">
					<u-icon name="/static/images/promise/shareArticle.png" size="24"></u-icon>
					<text class="talk">发文章</text>
				</view>
			</view>
		</view>
		
		<view class="flowBox">
			<view class="title">流程介绍</view>
			<view class="flowImg">
				<image src="@/static/images/promise/flowImg.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				// 平台承诺
				promiseList:[
					{
						iconUrl:'/static/images/promise/leftCar.png',
						text:'价不满意包邮寄回'
					},
					{
						iconUrl:'/static/images/promise/rightHand.png',
						text:'寄售期间破损包赔'
					},
					{
						iconUrl:'/static/images/promise/leftCoupon.png',
						text:'货品不售出不收费'
					},
					{
						iconUrl:'/static/images/promise/rightVedio.png',
						text:'连麦最快当天售出'
					},
					{
						iconUrl:'/static/images/promise/leftPeple.png',
						text:'销售情况随时知道'
					},
					{
						iconUrl:'/static/images/promise/rightMoney.png',
						text:'售出仅抽取10个点'
					},
				]
			}
		},
		methods:{
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox{
		margin: $uni-spacing-row-lg;
		.title{
			color: $uni-text-color;
			font-weight: bold;
			padding: $uni-spacing-row-sm;
			padding-bottom: 0;
		}
		.detail{
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
			padding: $uni-spacing-row-sm 0 0 $uni-spacing-row-sm;
		}
		.content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.soonSend{
				background-color: $gs-color-green;
				color: $uni-bg-color-grey;
				padding: $uni-spacing-row-sm;
				padding-left: $uni-spacing-row-lg;
				padding-right: $uni-spacing-row-base;
				border-radius: 16px;
				font-size: $uni-font-size-sm;
				display: flex;
				align-items: center;
			}
		}
		.promiseBox{
			background-color: $gs-jpBg;
			border-radius: 12px;
			padding: $uni-spacing-col-base;
			margin-bottom: $uni-spacing-row-lg;
			.promiseList{
				display: grid;
				grid-template-columns: 1fr 1fr;
				padding: $uni-spacing-row-sm;
				.promiseContent{
					display: flex;
					align-items: center;
					margin-left: $uni-spacing-row-sm;
					.promiseIcon{
						width: 48rpx;
						height: 48rpx;
						margin: $uni-spacing-row-sm;
					}
					.Promisetext{
						font-size: $uni-font-size-base;
						color: $uni-text-color;
					}
				}
			}
			
		}
		.sellBox{
			margin-top: $uni-spacing-row-lg;
			margin-bottom: $uni-spacing-row-lg;
			display: grid;
			grid-gap: 10px;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: "a b"
								 "a d";
			.sellLeft{
				background-color: $gs-jpBg;
				border-radius: 12px;
				padding: $uni-spacing-col-base;
				grid-area: a;
				.title{
					padding-bottom: $uni-spacing-row-sm;
				}
			}
			.sellRightTop,.sellRightBottom{
				background-color: $gs-jpBg;
				border-radius: 12px;
				display: flex;
				justify-content: space-between;
			}
			.sellRightTop{
				grid-area: b;
			}
			.sellRightBottom{
				grid-area: d;
			}
			.content{
				padding: $uni-spacing-col-sm;
			}
		}
		
		.shareBox{
			background-color: $gs-jpBg;
			border-radius: 12px;
			padding: $uni-spacing-col-base;
			margin-top: $uni-spacing-row-lg;
			margin-bottom: $uni-spacing-row-lg;
			.shareContent{
				display: flex;
				padding: $uni-spacing-row-lg $uni-spacing-row-lg $uni-spacing-row-sm $uni-spacing-row-lg;
				.shareLeft,.shareRight{
					display: flex;
					align-items: center;
					padding-right: $uni-spacing-row-lg;
					.talk{
						padding-left: $uni-spacing-row-sm;
					}
				}
			}
		}
		
		.flowBox{
			padding: $uni-spacing-col-base;
			.flowImg{
				padding: $uni-spacing-row-sm;
				margin-top: $uni-spacing-row-lg;
			}
			/deep/uni-image{
				width: 100%;
				height: 126px;
			} 
		}
	}
</style>